<template>
  <div>
    <van-sticky>
      <div class="redTltle">
        <van-row>
          <van-col span="2"
            ><van-icon name="arrow-left" @click="routerBack"
          /></van-col>
          <van-col span="5" offset="8"
            ><div class="redTltle">文章详情</div></van-col
          >
        </van-row>
      </div>
    </van-sticky>
    <div class="titleclass">
      {{ conten.title }}
    </div>
    <div class="authorClass">
      <van-row gutter="24" type="flex" justify="center">
        <van-col span="10">作者：{{ conten.author }}</van-col>
        <van-col span="10">发表时间：{{ conten.publishDate }}</van-col>
      </van-row>
    </div>
    <div class="text">
      {{ conten.subtext }}
    </div>
    <div class="btn">
      <div class="loins"></div>
      <van-row gutter="24" type="flex" justify="center">
        <van-col span="5">
          <img
            src="./../../assets/read.svg"
            class="imgcla"
            @click="toqikdetail"
          />
          <div @click="toqikdetail">阅读全文</div>
        </van-col>
        <!--        <van-col offset="3" span="4">-->
        <!--          <img src="./../../assets/download.svg" class="imgcla"/>-->
        <!--          <div style="color:#fa1636;">下载</div>-->
        <!--        </van-col>-->
      </van-row>
    </div>

    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="left"
      :style="{ height: '100%' }"
    >
      <div class="markdown">{{ fulltext }}</div>
    </van-popup>
  </div>
</template>

<script>
import "./markdown.css";
import util from "./utlis";
import { getDocumentDetail } from "@/api/emergency";
export default {
  name: "readDownload",
  data() {
    return {
      conten: {},
      fulltext: "",
      show: false,
    };
  },
  created() {
    // console.log(JSON.parse(decodeURIComponent(this.$route.query.items)))

    // this.conten = JSON.parse(decodeURIComponent(this.$route.query.items))
    // console.log("5555", this.conten)
    this.loadArticle();
  },
  methods: {
    //跳转详情页
    toqikdetail(item) {
      //console.log("333",item)
      this.show = true;
      // util.gotodetailqk(this.conten.tableName,this.conten.fileName)
    },
    //返回按钮
    routerBack() {
      this.$router.go(-1);
    },
    async loadArticle() {
      switch (this.conten.tableName) {
        case "MYDXSPIDER_METADATA":
          this.optshow = false;
          break;
      }
      try {
        const { data } = await getDocumentDetail({
          tableName: this.$route.query.tableName,
          sysId: this.$route.query.sysId,
          fileName: this.$route.query.fileName,
        });

        console.log("data44", data);
        this.conten = data.data;
        this.fulltext = data.data.text;
        this.subtext = data.data.subtext;

        //数据改变影响视图更新(DOM数据)不是立即的
        //如果需要在修改数据之后马上操作被该数据影响的视图DOM，需要把这个代码方在$nextTick中
        //得到所有的img标签

        // this.$nextTick(()=>{
        //  this.handlePreviewImage()
        // })

        //循环img列表，给img注册点击事件

        //在事件处理中调用ImagePreview
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style scoped>
.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
}
.titleclass {
  /*width: 7.64rem;*/
  /*height: 0.533rem;*/
  width: 100%;
  text-align: center;
  font-family: PingFang-SC-Bold;
  font-size: 0.56rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  margin-top: 0.747rem;
}
.authorClass {
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.6;
  width: 100%;
  margin: 0.5rem auto;
}
.text {
  font-family: PingFang-SC-Regular;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  width: 94%;
  margin: 0 auto;
  /* text-align: center; */
}
.btn {
  width: 100%;
  font-family: PingFang-SC-Bold;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #fa1636;
  text-align: center;
  margin-top: 1rem;
  position: absolute;
  bottom: 1.5rem;
}
.loins {
  width: 10rem;
  height: 0.027rem;
  background-color: #000000;
  opacity: 0.1;
  margin-bottom: 0.4rem;
}
.imgcla {
  width: 0.667rem;
  height: 0.587rem;
}
</style>